import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Edit, Trash2, MapPin } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { MoreHorizontal } from "lucide-react";

const typeColors = {
  tensionTower: "bg-purple-100 text-purple-800 border-purple-200",
  straightLineTower: "bg-green-100 text-green-800 border-green-200",
  angleTower: "bg-orange-100 text-orange-800 border-orange-200",
  branchTower: "bg-blue-100 text-blue-800 border-blue-200"
};

export default function TowerCard({ tower, projectName, onEdit, onDelete, towerTypeLabels }) {
  return (
    <Card className="hover:shadow-lg transition-shadow duration-300">
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <CardTitle className="text-lg font-bold text-gray-900 flex items-center gap-2">
              <MapPin className="w-5 h-5 text-blue-600" />
              {tower.towerNumber}
            </CardTitle>
            <p className="text-sm text-gray-500 mt-1">{projectName}</p>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon">
                <MoreHorizontal className="w-4 h-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => onEdit(tower)}>
                <Edit className="w-4 h-4 mr-2" />
                编辑
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => onDelete(tower.id)} className="text-red-500">
                <Trash2 className="w-4 h-4 mr-2" />
                删除
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </CardHeader>
      
      <CardContent className="space-y-3">
        <div className="flex items-center gap-2">
          <Badge className={`${typeColors[tower.type]} border font-medium`}>
            {towerTypeLabels[tower.type]}
          </Badge>
        </div>

        {tower.height && (
          <div className="text-sm">
            <span className="text-gray-500">高度：</span>
            <span className="font-medium text-gray-900">{tower.height} m</span>
          </div>
        )}

        {tower.groundElevation && (
          <div className="text-sm">
            <span className="text-gray-500">呼称高：</span>
            <span className="font-medium text-gray-900">{tower.groundElevation} m</span>
          </div>
        )}

        {(tower.latitude && tower.longitude) && (
          <div className="text-sm">
            <span className="text-gray-500">坐标：</span>
            <span className="font-medium text-gray-900">
              {tower.latitude.toFixed(6)}, {tower.longitude.toFixed(6)}
            </span>
          </div>
        )}

        {tower.description && (
          <div className="text-sm text-gray-600 line-clamp-2">
            {tower.description}
          </div>
        )}
      </CardContent>
    </Card>
  );
}